<template>
  <div class="pinia-example">
    <h2>Pinia 状态管理示例</h2>
    
    <el-card class="example-card">
      <h3>应用状态</h3>
      <p>侧边栏状态: {{ appStore.sidebar.opened ? '展开' : '收起' }}</p>
      <p>设备类型: {{ appStore.device }}</p>
      <el-button @click="toggleSidebar">切换侧边栏</el-button>
    </el-card>
    
    <el-card class="example-card">
      <h3>主题状态</h3>
      <p>当前主题: {{ themeStore.theme }}</p>
      <p>系统主题: {{ themeStore.systemTheme }}</p>
      <el-button @click="switchTheme">切换主题</el-button>
    </el-card>
    
    <el-card class="example-card">
      <h3>用户状态</h3>
      <p>登录状态: {{ userStore.isLogin ? '已登录' : '未登录' }}</p>
      <p>用户姓名: {{ userStore.getUserName }}</p>
      <p>用户角色: {{ userStore.getUserRole }}</p>
      <el-button @click="login" v-if="!userStore.isLogin">模拟登录</el-button>
      <el-button @click="logout" v-else>退出登录</el-button>
    </el-card>
  </div>
</template>

<script>
import { useAppStore, useThemeStore, useUserStore } from '../stores/modules'

export default {
  name: 'PiniaExample',
  setup() {
    const appStore = useAppStore()
    const themeStore = useThemeStore()
    const userStore = useUserStore()
    
    const toggleSidebar = () => {
      appStore.toggleSidebar()
    }
    
    const switchTheme = () => {
      const themes = ['light', 'dark', 'auto']
      const currentIndex = themes.indexOf(themeStore.theme)
      const nextIndex = (currentIndex + 1) % themes.length
      themeStore.setTheme(themes[nextIndex])
    }
    
    const login = () => {
      // 模拟登录
      userStore.setUserInfo({
        id: 1,
        username: 'admin',
        name: '管理员',
        email: 'admin@example.com',
        role: '管理员'
      })
    }
    
    const logout = () => {
      userStore.logout()
    }
    
    return {
      appStore,
      themeStore,
      userStore,
      toggleSidebar,
      switchTheme,
      login,
      logout
    }
  }
}
</script>

<style scoped>
.pinia-example {
  padding: 20px;
}

.example-card {
  margin-bottom: 20px;
}

.example-card h3 {
  margin-top: 0;
}
</style>